<template>
  <div class="page-transition">
    <div class="mb24">
      <el-button type="primary" class="mb24" @click="isShow = !isShow"> 简单的transition动画 </el-button>
      <Transition name="fade">
        <div v-if="isShow" class="fade_box" />
      </Transition>
    </div>
    <div>
      <div class="flex align-center mb24">
        <el-button type="primary" class="mr24" @click="isShowAnimate = !isShowAnimate"> 搭配Animate.css动画库 </el-button>
        <h5 class="link doc" style="color: rgba(6, 51, 116, 0.6)" @click="handleDoc">Animate.css动画库</h5>
      </div>
      <div class="flex">
        <Transition enter-active-class="animate__animated animate__fadeInDownBig" leave-active-class="animate__animated animate__fadeOutTopLeft">
          <div v-if="isShowAnimate" class="animate_box" style="background-color: brown" />
        </Transition>
        <Transition enter-active-class="animate__animated animate__slideInDown" leave-active-class="animate__animated animate__slideOutDown">
          <div v-if="isShowAnimate" class="animate_box" style="background-color: dodgerblue" />
        </Transition>
        <Transition enter-active-class="animate__animated animate__rotateInDownLeft" leave-active-class="animate__animated animate__rotateOutUpRight">
          <div v-if="isShowAnimate" class="animate_box" />
        </Transition>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import 'animate.css'
// import pdf from 'vue-pdf'
const isShow = ref(true)
const isShowAnimate = ref(true)
const handleDoc = () => {
    window.open('https://animate.style/', '_blank')
}
</script>

<style lang="less" scoped>
.page-transition {
  .fade_box {
    width: 200px;
    height: 200px;
    background-color: rgb(15, 36, 159);
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 3s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .animate_box {
    width: 200px;
    height: 200px;
    background-color: rgb(184, 149, 73);
  }
}
</style>
